Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">Remove</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
	el: "#todo-list-demo",
	data: {
		newTODOText: '',
		todos: [],
		nextTODOId: 1
	},
	methods: {
		addNewTODO: function(){
			if(this.newTODOText !== ''){
				this.todos.push({
					id: this.nextTODOId++,
					text: this.newTODOText
				})
				this.newTODOText = ''
			}
		}
	}
	
})

